<template>
  <el-main>
    <div style="text-align: left" class="div1">


      <span>学生管理系统</span>
      <br />

      <el-input placeholder="学生姓名" v-model="input1" style="width:200px;margin-right:20px"></el-input>
      <el-input placeholder="手机号码" v-model="input2" style="width:200px;margin-right:20px"></el-input>
      <el-input placeholder="身份证号" v-model="input3" style="width:200px;margin-right:20px"></el-input>

      <!--查询-->
      <el-button type="info" icon="el-icon-search" @click="select">查询</el-button>
      <!--添加按钮-->
      <el-button type="text" @click="dialogVisible = true" class="add1">新增</el-button>
      <!--添加模态框-->
      <el-dialog title="新增学生" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <span>新增学生</span>
        <br>
        <div class="addinput">
          <el-input placeholder="学生姓名" v-model="addname" style="width:300px;"></el-input>
          <el-input placeholder="手机号" v-model="addmobile" style="width:300px;"></el-input>
          <el-input placeholder="性别" v-model="addsex" style="width:300px;"></el-input>
          <el-input placeholder="年龄" v-model="addage" style="width:300px;"></el-input>
          <el-input placeholder="身份证号" v-model="addidNum" style="width:300px;"></el-input>
          <el-input placeholder="籍贯" v-model="addnativePlace" style="width:300px;"></el-input>
          <el-input placeholder="邮箱" v-model="addemail" style="width:300px;"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add1(), dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <!--修改模态框-->
      <el-dialog title="修改学生" :visible.sync="updatadialogVisible" width="30%" :before-close="handleClose">
        <span>修改学生</span>
        <br>
        <div class="updateinput">
          <el-input placeholder="学生姓名" v-model="updatename" style="width:300px;"></el-input>
          <el-input placeholder="手机号" v-model="updatemobile" style="width:300px;"></el-input>
          <el-input placeholder="性别" v-model="updatesex" style="width:300px;"></el-input>
          <el-input placeholder="年龄" v-model="updateage" style="width:300px;"></el-input>
          <el-input placeholder="身份证号" v-model="updateidNum" style="width:300px;"></el-input>
          <el-input placeholder="籍贯" v-model="updatenativePlace" style="width:300px;"></el-input>
          <el-input placeholder="邮箱" v-model="updateemail" style="width:300px;"></el-input>
          <el-input placeholder="id" v-model="updatestudentId" style="width:300px;" v-show="false"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updatadialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="update(), updatadialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>

    </div>
    <el-table :data="tableData">
      <el-table-column prop="studentName" label="学生姓名" width="120">
      </el-table-column>
      <el-table-column prop="mobile" label="手机号" width="140">
      </el-table-column>
      <template slot-scope=""><!-- 性别FM -->
        <el-table-column label="性别" width="180">
          <template slot-scope="scope">
            <span v-html="sex1(scope.row.sex)"></span>
          </template>
        </el-table-column>
      </template>
      <el-table-column prop="age" label="年龄" width="120">
      </el-table-column>
      <el-table-column prop="idNum" label="证件号码" width="200">
      </el-table-column>
      <el-table-column prop="nativePlace" label="籍贯" width="100">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="400">
      </el-table-column>
      <template slot-scope=""><!-- 时间转换 -->
      <el-table-column  label="创建时间" width="400">
        <template slot-scope="scope">
          <span v-html="getYMDHMS(scope.row.createTime)"></span>
        </template>
      
      </el-table-column>
      </template>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <!--修改按钮-->
          <el-button type="text" @click="findupdata(scope.row.studentId)">修改</el-button>
          <!--删除按钮-->
          <el-button size="mini" type="danger" @click="deleteStu(scope.row.studentId)">删除</el-button>

        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row>
        <el-col style="text-align: right">        
          <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="pageNum"
               :page-sizes="[5, 10, 15, 20]"
               :page-size="pageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="total"
             >
                      
          </el-pagination>      
        </el-col>
    </el-row>




  </el-main>
</template>

<script>

export default {
  
  //页面自动加载，
  created: function () {
    this.select();

  },
  data() {
    return {
      //分页
      pageNum: 1, //默认当前页数
      pageSize: 5, //默认每页显示条数
      total: 0, //总数据条数

      input1: "",
      input2: "",
      input3: "",
      //新增的el-input
      addname: "",
      addmobile: "",
      addsex: "",
      addage: "",
      addidNum: "",
      addnativePlace: "",
      addemail: "",
      tableData: [], //查询
      options: [],
      // //修改
      updatename: "",
      updatemobile: "",
      updateidNum: "",
      updateemail: "",
      updateage: "",
      updatenativePlace: "",
      updatesex: "",
      updatestudentId: "",
      //模态框
      dialogVisible: false,
      updatadialogVisible: false,
      deleteDialogVisible: false,

    };
  },
  methods: {
    //修改返现
    findupdata: function (studentId) {
      this.updatadialogVisible = true;
      var that = this;

      this.$axios.post("/Student/findStu", {
        studentId: studentId,
      })
        .then(function (response) {
          if (response.data.code == "0000") {

            that.updatename = response.data.data[0].studentName;
            that.updatemobile = response.data.data[0].mobile;
            that.updateage = response.data.data[0].age;
            that.updateidNum = response.data.data[0].idNum;
            that.updatenativePlace = response.data.data[0].nativePlace;
            that.updateemail = response.data.data[0].email;
            that.updatesex = response.data.data[0].sex;
            that.updatestudentId = response.data.data[0].studentId;
            that.select();
          } else {
            //alert("修改失败");
          }

        })
        .catch(function (error) { });
    },
    //修改
    update: function () {
      var that = this;
      this.$axios.post("/Student/updateStudent", {
        UpStudentName: that.updatename,
        UpMobile: that.updatemobile,
        UpAge: that.updateage,
        UpIdNum: that.updateidNum,
        UpNativePlace: that.updatenativePlace,
        UpEmail: that.updateemail,
        studentId: that.updatestudentId,
      })
        .then(function (response) {
          that.select();

        })
    },
    //查询加条件查询
    select: function () {
      var that = this;
      this.$axios.post("/Student/regiaterInsert", {
        studentName: this.input1,
        mobile: this.input2,
        idNum: this.input3,

        //分页
        pageNum: that.pageNum,
        pageSize: that.pageSize,
      })
        .then(function (response) {
          console.log("response!" + response);
          that.tableData = response.data.data;
          that.total = response.data.pageInfo.total;//pageInfo是后端server里的PageInfo的方法名
          that.$message({
            message: "数据加载成功!",
            type: "success",
          });
        })
        .catch(function (error) { });
    },
    // 获取当前页的数据信息
    //pageSize 默认每页显示条数改变时会触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.select(this.pageNum, this.pageSize); //console.log(`每页 ${val} 条`);
    }, //currentPage 默认当前页数改变时会触发
    handleCurrentChange(val) {
      this.pageNum = val;
      this.select(this.pageNum, this.pageSize); //console.log(`当前页: ${val}`);
    },
    //模态框  
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    add1: function () {
      var that = this;
      this.$axios.post("/Student/insert", {
        AddStudentName: that.addname,
        AddMobile: that.addmobile,
        Addsex: that.addsex,
        AddAge: that.addage,
        AddIdNum: that.addidnum,
        AddNativePlace: that.addnativePlace,
        AddEmail: that.addemail

      })
        .then(function () {
          that.select();
        })
        .catch(function (error) { });
    },
    deleteStu: function (studentId) {
      var that = this;
      this.$axios.post("/Student/deleteStudent", {
        studentId: studentId
      })
        .then(function (response) {
          that.select();
          alert("删除成功");
        })
        .catch(function (error) { });
    },
    //性别转换
    sex1(sex) {
      if (sex == "F") {
        return "女";
      } else if (sex == "M") {
        return "男";
      }

    },
    //时间格式转换
    getYMDHMS: function (timestamp) {
      let time = new Date(timestamp);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let date = time.getDate();
      let hours = time.getHours();
      let minute = time.getMinutes();
      let second = time.getSeconds();

      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      if (second < 10) {
        second = "0" + second;
      }return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hours +
        ":" +
        minute +
        ":" +
        second
      );
    },


  },

};
</script>
<!-- 大页面 -->
<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.add {
  background-color: #72a8ef;
  color: #333;
  width: 70px;
}
</style>